<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Prueba Movil</title>
	<link rel="shortcut icon" href="<%= request.getContextPath() %>/movil/favicon.ico">
	
	<link rel="stylesheet"  href="<%= request.getContextPath() %>/movil/css/jquery.mobile-1.4.0.min.css">
	
	<script src="<%= request.getContextPath() %>/movil/js/jquery.js"></script>
	<script src="<%= request.getContextPath() %>/movil/js/jquery.mobile-1.4.0.min.js"></script>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=es"></script>
</head>
<body>

<!-- Pagina principal -->

<div data-role="page" id="home" data-title="Pruebas | Home">

	<div data-role="header" data-theme="b">
		<h1>Home</h1>
		<a href="#menu" class="ui-btn-right" data-icon="star" data-position="right" data-iconpos="notext"></a>
				
		<div data-role="navbar">
			<ul>
				<li><a href="#page2" data-icon="star" data-transition="slide">Pagina 2</a></li>
				<li><a href="#listado" data-icon="grid" data-transition="pop">Listado</a></li>
				<li><a href="#formulario" data-icon="grid" data-transition="pop">Formulario</a></li>
				<li><a href="#mapa" data-icon="grid" data-transition="pop">Mapa</a></li>
			</ul>
		</div>
	</div>
	
		<!-- Menu lateral -->

	<div data-role="panel" id="menu" data-display="push" data-theme="b" data-position="right">
		<ul data-role="listview">
			<li><a href="#page2" data-icon="star" data-transition="slide">Pagina 2</a></li>
			<li><a href="#listado" data-icon="grid" data-transition="pop">Listado</a></li>
			<li><a href="#formulario" data-icon="grid" data-transition="pop">Formulario</a></li>
			<li><a href="#mapa" data-icon="grid" data-transition="pop">Mapa</a></li>			
		</ul>
	</div>	
	
	<div data-role="content">
		<a href="#page2" 
		   data-role="button" 		   
		   data-theme="b"
		>
		   Pagina 2
		</a>
		
		<a href="#listado" 
		   data-role="button" 		   
		   data-theme="b"
		>
		   Listado alumnos
		</a>	
		
		<a href="#formulario" 
		   data-role="button" 		   
		   data-theme="b"
		>
		   Formulario
		</a>
		
		<a href="#mapa" 
		   data-role="button" 		   
		   data-theme="b"
		>
		   Mapa
		</a>		
	</div>
	
	<div data-role="footer" data-theme="b">
		<a href="#politica" data-rel="dialog">Politica Privacidad</a>
	</div>	
	
</div>

<!-- Pagina 2 -->

<div data-role="page" id="page2" data-title="Pruebas | Pagina 2">

	<div data-role="header" data-theme="b">
	
		<h1>Pagina 2</h1>
		
		<a href="#home" 
		   data-role="button" 
		   data-icon="home" 
		   data-iconpos="notext"
		>
		   Home
		</a>
		
	</div>
	
	<div data-role="content">
		<p>Contenido 2</p>
	</div>
	
	<div data-role="footer" data-theme="b">
		<h1>Pie de pagina</h1>
	</div>	
	
</div>

<!-- Listado de alumnos -->

<div data-role="page" id="listado" data-title="Pruebas | Pagina 2">
	<div data-role="header" data-theme="b">
		<h1>Lista de alumnos</h1>
		<a href="#home" 
		   data-role="button" 
		   data-icon="home" 
		   data-iconpos="notext"
		>
		   Home
		</a>
	</div>
	<div data-role="content">
	
		<ul data-role="listview" data-filter="true">
			<% for(int i=0; i<10; i++){ %>
				<li><a href="#">Alumno <%=i %></a></li>
			<%} %>
		</ul>
	
	</div>
	<div data-role="footer" data-theme="b">
		<h1>Pie de pagina Listado de alumnos</h1>
	</div>	
</div>

<!-- Formulario -->

<div data-role="page" id="formulario" data-title="Pruebas | Pagina 2">
	<div data-role="header" data-theme="b">
		<h1>Formulario</h1>
		<a href="#home" 
		   data-role="button" 
		   data-icon="home" 
		   data-iconpos="notext"
		>
		   Home
		</a>
	</div>
	<div data-role="content">
	
	</div>
	<div data-role="footer" data-theme="b">
		<h1>Pie de Formulario</h1>
	</div>	
</div>

<!-- Mapa -->

<div data-role="page" id="mapa" data-title="Pruebas | Pagina 2">
	<div data-role="header" data-theme="b">
		<h1>Mapa</h1>
		<a href="#home" 
		   data-role="button" 
		   data-icon="home" 
		   data-iconpos="notext"
		>
		   Home
		</a>
	</div>
    <div role="main" class="ui-content" id="map-canvas" style="width: 100%; height: 500px;">
        <!-- map loads here... -->
    </div>
	<div data-role="footer" data-theme="b">
		<h1>Pie de Mapa</h1>
	</div>	
</div>

<!-- Pagina Politica Privacidad -->

<div data-role="page" id="politica" data-title="Pruebas | Politica Privacidad">
	<div data-role="header" data-theme="b">
		<h1>Politica Privacidad</h1>
	</div>
	<div data-role="content">
		<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra mauris ligula, ut dapibus metus mattis ut. Donec rhoncus sem non sem porta feugiat. Donec pulvinar justo in turpis adipiscing, ac egestas felis varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sapien dolor, aliquet eget aliquet id, iaculis a nibh. Maecenas adipiscing viverra imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam in facilisis turpis, vel pretium velit. Maecenas sodales lacinia placerat. Proin sodales leo magna, non consequat diam vulputate eget. Aliquam justo diam, feugiat eget semper nec, lobortis gravida felis. Aliquam a egestas ipsum, at tincidunt purus. Ut eget lorem vel arcu laoreet ornare sed vitae elit. Suspendisse aliquam sed augue vel porttitor. Aliquam suscipit luctus libero, quis pellentesque libero ultrices vitae.
		</p>
		<p>		
Suspendisse porttitor nunc non elementum molestie. Vivamus non lacus eget mi mollis semper non ac risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam tempus semper purus, et dignissim dolor interdum a. Donec id varius risus. Sed vel risus ac libero semper laoreet. Donec imperdiet elit diam, vel luctus ipsum facilisis vitae. Nunc mattis aliquet nisl, nec bibendum magna convallis sit amet. Sed mi orci, ultrices a commodo at, venenatis eget velit. In malesuada ipsum non elit lobortis, at feugiat magna blandit. Nulla odio ipsum, adipiscing id nisi eget, volutpat rutrum dui.
		</p>
		<p>
Sed luctus aliquet euismod. Nam eget consectetur arcu. Suspendisse imperdiet placerat gravida. Aliquam vel nulla sit amet orci pellentesque malesuada pulvinar rutrum lacus. Etiam sed vehicula metus. In elementum purus lorem, eu vehicula nibh bibendum vel. Sed a est nunc. Maecenas porta elit porta congue adipiscing.
		</p>
		<p>
Maecenas feugiat feugiat leo at consequat. Nullam felis leo, tincidunt quis sapien ut, viverra sodales neque. Pellentesque commodo nisl magna, quis egestas elit sagittis et. Proin quis vehicula purus. Mauris dignissim sit amet nibh eget condimentum. Donec consectetur risus tellus, eget molestie risus ultrices non. Maecenas quis magna odio. Pellentesque sagittis dignissim faucibus. Etiam viverra iaculis erat et bibendum. Morbi imperdiet in leo a euismod. Nunc tristique ultrices neque sit amet imperdiet. Etiam et odio odio. Donec lacus ante, gravida at feugiat non, bibendum eget risus. Praesent a imperdiet nulla. Donec imperdiet, urna eu luctus lacinia, eros ipsum rutrum lectus, vitae faucibus augue ipsum sed tellus. Aenean neque sem, pretium sit amet auctor et, adipiscing in enim.
		</p>
		<p>
Vestibulum pharetra hendrerit elementum. Sed est justo, vehicula gravida ornare non, cursus at augue. Quisque ligula turpis, dictum vitae nunc vel, blandit gravida eros. Sed sit amet sapien eu eros dapibus suscipit. Aliquam sit amet aliquam ante, blandit tincidunt nisl. Nulla facilisi. Nam elementum purus massa, et elementum dolor porta eget. 		
		</p>
	</div>
</div>

<script>

	$(document).ready(function(){
		$.mobile.defaultDialogTransition = "slideup";
		$.mobile.defaultPageTransition = "flip";
	})
	
	/*
 * Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
 * Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
 */
$( document ).on( "pageinit", "#mapa", function() {	
    var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);  // Default to Hollywood, CA when no geolocation support

    if ( navigator.geolocation ) {
        function success(pos) {
            // Location found, show map with these coordinates
            drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        }
        function fail(error) {
            drawMap(defaultLatLng);  // Failed to find location, show default map
        }
        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
        navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
    } else {
        drawMap(defaultLatLng);  // No geolocation support, show default map
    }
    function drawMap(latlng) {
        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!"
        });
    }
});

</script>


</body>
</html>